<template>
	<div>
		<!-- 如果是数组 -->
		<template v-if="Array.isArray(data[field + '.tag'])">
			<template v-if="data[field + '.tag'].every(tag => !tag.icon)">
				<!-- 渲染 el-tag，如果数组中的每个元素没有 icon -->
				<el-tag
					v-for="(tag, index) in data[field + '.tag']"
					:key="index"
					:type="tag.color"
					style="margin-right: 10px;"
				>
					<span :style="{color:injectTheme.color[tag.color].main}">{{tag.text}}</span>
				</el-tag>
			</template>
			<!-- 如果数组元素中有 icon，渲染 span -->
			<template v-else>
				<span
					v-for="(tag, index) in data[field + '.tag']"
					:key="index"
					style="margin-right: 10px;"
				>
					<Icon
						:name="tag.icon"
						:color="injectTheme.color[tag.color].main"
					/>
					<span :style="{color:injectTheme.color[tag.color].main,marginLeft:'10px',verticalAlign: 'middle'}">{{tag.text}}</span>
				</span>
			</template>
		</template>

		<!-- 如果标签是单个对象 -->
		<template v-else>
			<template v-if="!data[field + '.tag'].icon">
				<!-- 渲染 el-tag，如果没有 icon -->
				<el-tag
					:type="data[field + '.tag'].color"
					style="margin-right: 10px;"
				>
					{{data[field + '.tag'].text}}
				</el-tag>
			</template>
			<!-- 如果单个对象有 icon，渲染带图标的 span -->
			<template v-else>
				<span style="margin-right: 10px;">
					<Icon
						:name="data[field + '.tag'].icon"
						:color="injectTheme.color[data[field + '.tag'].color].main"
					/>
					<span
						:style="{color:injectTheme.color[data[field + '.tag'].color].main,marginLeft:'10px',verticalAlign: 'middle'}"
					>{{data[field + '.tag'].text}}</span>
				</span>
			</template>
		</template>
	</div>
</template>

<script setup lang="ts">
import Icon from './Icon.vue';
import {magicUtil} from '@lexmis/magic-ui/pc';
const injectTheme = magicUtil.injectTheme();
console.log(injectTheme.value, 'injectTheme');
defineProps({
	data:{
		type:Object,
		required:true,
	},
	field:{
		type:String,
		required:true,
	},
});
</script>

<style scoped lang="scss">
</style>